{% extends "base_unacol.html" %}

{% block title %}{{ consorcio.nombre }} - Balance del {{ balance.fecha_vencimiento|date:"m\/Y" }}{% endblock title %}

{% block extrahead %}
<script type="text/javascript" src="/static/js/jquery.ingrid-0.9.2.js"></script>
<script type="text/javascript" src="/static/js/jquery.jeditable.pack.js"></script>
<link rel="stylesheet" href="/static/js/ingrid.css" type="text/css" media="screen" />
{% endblock %}


{% block jquery %}
<script type="text/javascript">


$(document).ready(
     
	function() {
		
		
		$("#balance").ingrid({ 
			url: '/balance/detalle-{{ balance.id }}',
			initialLoad: false,			
			height: {{ alto }},
			colWidths: [25,350,110,100],		// width of each column
			rowClasses: ['grid-row-style1','grid-row-style2'],
			resizableCols: false,
			paging: false,
			rowSelection: false,
			sorting: true
		});
        
        {% if not balance.balance_cerrado %}
        {# el balance no está cerrado y puede ser editable #}
        
		$(".edit-concepto").editable("/balance/item/concepto", {
				event     : "dblclick"
		});		
		$(".edit-categoria").editable("/balance/item/categoria", {
				event     : "dblclick"
		});				
		$(".edit-monto").editable("/balance/item/monto", {
						event     : "dblclick"
		});						
        {% endif %}
        
	}
); 
</script>

{% endblock jquery%}


{% block unacol %}
<h2>Consorcio "{{ consorcio.nombre }}" - {{ balance.fecha_balance|date:"F \de Y" }}</h2>
<p>vencimiento {{ balance.fecha_vencimiento|date:"d-m-Y" }} - Identificador de Balance: {{ balance.id }}</p>



<div>
<table><tr class="grid-header-bg"><td>Caja actual del consorcio</td><td>$ {{ consorcio.saldo_actual }}</td></tr>
</div>

{% if mensaje %}
<div class="mensaje">{{ mensaje }}</div>
{% endif %}

{% if balance.balance_cerrado %}
<div style="border: 1px solid #000">Este Balance se cerró el dia {{ balance.fecha_cierre }}</div>
{% endif %}

<table id="balance">
<thead>
<tr><th>X</th><th>Concepto</th><th>Categoría</th><th>Monto</th></tr>
</thead>
<tbody>
{% for item in items %}
                         <tr>
                         <td><a href="/balance/{{ balance.id }}/item/{{ item.id }}" title="eliminar este item">X</a></td>
                         <td><div class="edit-concepto" id="{{ item.id }}">{{ item.concepto }}</div></td>
                         <td><div class="edit-categoria" id="{{ item.id }}">{{ item.categoria }}</td>
                         <td style="text-align:right">$ <span class="edit-monto" id="{{ item.id }}">{{ item.monto }}</span></td>                  
                         </tr>
                        {% endfor %}               
</tbody>
</table>
<table><tr class="grid-row-style3"><td colspan="3" style="text-align:right" width="491px">Total:</td><td width="100px" style="text-align:right">$ {{ balance.total }}</td></tr></table>



<!--#TODO crear otra vista/template para cargar cada item-->

{% if not balance.balance_cerrado %}

<form action="./cerrar" method="POST" name="cerrar">
<input type="button" value="CERRAR BALANCE Y GENERAR EXPENSAS DEL MES" onclick="if(confirm('Esto genera los comprobantes de expensas que no se podrán modificar')) document.cerrar.submit();" />
</form>




<h2>Agregar Items</h2>

<form action="./" method="POST">
{{ form_add_item.as_p }}
<input type="submit" value="agregar al balance" />
</form>


{% endif %}

<a href="../">Ir al listado de departamentos</a>

{% endblock %}

